'use client'

import { Typography } from '@mui/material'
import Box from '@mui/material/Box'
import { useQuery } from '@tanstack/react-query'
import { SearchX } from 'lucide-react'
import React from 'react'

import { TaskCard } from '@/components/cards/task.card'

import { taskService } from '@/services/tasks.service'

export function TaskDetail({ id }: { id: string }) {
	const task_id = Number(id)
	const { data, isError, error, fetchStatus, status } = useQuery({
		queryKey: ['task', task_id],
		queryFn: async () => await taskService.fetch(id),
		enabled: !isNaN(task_id)
	})

	return (
		<>
			{isError || (fetchStatus === 'idle' && status === 'pending') ? (
				<Box
					sx={{
						display: 'flex',
						flexDirection: 'column',
						justifyContent: 'center',
						alignItems: 'center'
					}}
					color={'error.main'}
				>
					<SearchX size={100} />
					<Typography
						variant='h6'
						component='div'
						color='textSecondary'
					>
						{isError && !error?.message.includes('404')
							? error?.message
							: 'Задача не найдена'}
					</Typography>
				</Box>
			) : (
				<TaskCard task_data={data} />
			)}
		</>
	)
}
